import { Collection } from "@/common"
import { IconButton, Iconify, SvgIcon } from "@/components/icon"
import { useSettings } from "@/store/settingStore"
import { useThemeToken } from "@/theme/hooks"
import { ThemeMode } from "@/types/enum"
import type { MenuProps } from "antd"
import { Avatar, Button, Divider, Dropdown, Progress, Space, Table } from "antd"
import { CSSProperties } from "react"
import { ColumnsType } from 'antd/es/table';
import { TableProps } from 'antd';

type Props = {
  datas: Collection[],
  onDelete?: (collection: Collection) => void,
  onEdit?: (collection: Collection) => void,
} & TableProps
export default function CollectionTable({ datas, className, onDelete, onEdit, pagination }: Props) {
  const { colorPrimary } = useThemeToken();

  const iconMap = {
    'md': <SvgIcon size="18" icon="ic_file_md" />,
    'txt': <SvgIcon size="18" icon="ic_file_txt" />,
    'pdf': <SvgIcon size="18" icon="ic_file_pdf" />,
    'ppt': <SvgIcon size="18" icon="ic_file_ppt" />,
    'pptx': <SvgIcon size="18" icon="ic_file_ppt" />,
    'xls': <SvgIcon size="18" icon="ic_file_excel" />,
    'xlsx': <SvgIcon size="18" icon="ic_file_excel" />,
    'doc': <SvgIcon size="18" icon="ic_file_word" />,
    'docx': <SvgIcon size="18" icon="ic_file_word" />,
    'file': <SvgIcon size="18" icon="ic_file" />,
  }

  // 获取文件名后缀
  const getFileIcon = (name: string) => {
    try {
      const arr = name.split('.');
      return iconMap[arr[arr.length - 1]];
    } catch {
      return iconMap['file'];
    }
  }

  const columns: ColumnsType<Collection> = [
    {
      title: '文件名',
      dataIndex: 'name',
      render: (_, record) => (
        <div className="flex items-center">
          {/* <img src={record.avatar} alt="" className="h-9 w-9 rounded-full" /> */}
          {getFileIcon(record.name)}
          <div className="ml-2 flex flex-col">
            <span className="font-semibold">{record.name}</span>
            {/* <span className="text-xs opacity-50">{record.createTime}</span> */}
          </div>
        </div>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (val) => (
        <Progress percent={100} strokeColor={colorPrimary} trailColor="transparent" />
      ),
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '160px',
      render: (_,record) => (
        <div className="flex items-center space-x-2">
          {/* <IconButton>
            <SvgIcon icon="ic-eye" />
          </IconButton> */}
          <IconButton onClick={()=>onEdit && onEdit(record)}>
            <SvgIcon icon="ic-edit" />
          </IconButton>
          <IconButton onClick={()=>onDelete && onDelete(record)}>
            <SvgIcon icon="ic-delete" />
          </IconButton>
        </div>
      ),
    },
  ];

  // const style: CSSProperties = {
  //   height: '100%',
  //   padding: '16px',
  //   borderRadius: '16px',
  //   backgroundColor:
  //     themeMode === ThemeMode.Light ? colorBgLayout : 'rgba(145, 158, 171, 0.12)',
  // };
  return (
    <Table
      pagination={pagination}
      showHeader={false}
      size="small"
      className={className}
      rowKey={'_id'}
      // rowSelection={{ type: 'checkbox' }}
      columns={columns}
      dataSource={datas}
    />
  )
}